<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小u课堂</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- <a href="pages/videoDetail.html?id=5415f8fc-5023-45db-b6a9-eadbc5db7874">详情页</a> -->
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="./img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="javascript:;">首页</a></li>
                <li><a href="./pages/online.html">同步课程</a></li>
                <li><a href="#jing">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyWord">
                <img src="./img/index/search.png" alt="" id="searchByKeyword">
            </div>
            <div class="login" id="login">
                <a href="./pages/loginAndRegister/login.html">登陆</a> /
                <a href="./pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user_list" style="display: inline-block !important">
                <img src="./img/login/user.png" alt="" id="userimg">
                <div class="userlist" id="ulist">
                    <ul id="userlist">
                        <li>我是用户名</li>
                        <li id="coursesCenter">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li class="person">个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <!-- banner -->
        <div class="banner">
            <ul class="img" id="bannerimgs">
                <!-- <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner3.png" alt=""></li> -->
            </ul>
            <ul class="list" id="bannerdots">
                <!-- <li class="high">24小时不断电大课堂</li>
                <li>内容不够2</li>
                <li>内容不够3</li> -->
            </ul>
        </div>


        <!-- <div class="banner">
            <ul class="img">
                <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner3.png" alt=""></li>
            </ul>
            <ul class="list">
                <li class="high">24小时不断电大课堂</li>
                <li>内容不够2</li>
                <li>内容不够3</li>
            </ul>
        </div> -->

        <!-- 同步课程 -->
        <div class="online">
            <div class="title">
                <span class="line"></span>
                <span class="cont">同步课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="tongBuContainer">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">免费学习</div>
                            </div>
                        </li> -->
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 页面广告 -->
        <div class="contBanner">
            <img src="./img/index/WechatIMG20.png" alt="">
        </div>


        <!-- 精品课程 -->
        <div class="goodClass" id="jing">
            <div class="title">
                <span class="line"></span>
                <span class="cont">精品课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <!-- <ul id="jingPinContainer"> -->
                    <ul id="jPContainer">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：天津</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
                <div class="rightCont">
                    <img src="./img/index/good_banner7.png" alt="">
                </div>
            </div>
        </div>

        <div class="footB">
            <div><img src="./img/index/foot1.png" alt=""></div>
            <div><img src="./img/index/foot2.png" alt=""></div>
        </div>

        <div class="fix">
            <div class="lesson">
                <img src="./img/index/mylesson.png" alt="" id="myLesson">
            </div>
            <div class="top">
                <img src="./img/index/gotop.png" alt="">
            </div>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="utils/http.js"></script>

    <script>
        let mid = localStorage.getItem('mid')
            //获取用户头像信息
        async function getUserIcon() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/user',
                data: {
                    mid
                }
            })
            console.log(result.result.head_photo_url);

            let userInfo = result.result
                //头像赋值
            $('#userimg').attr('src', userInfo.head_photo_url);
        }
        getUserIcon();

        // 登录后隐藏登录注册样式 显示用户头像的样式
        let isLogin = localStorage.getItem('token');
        console.log(isLogin);

        if (!isLogin) { //未登录状态 显示登录注册按钮
            $('#login a').css('display', 'inline-block');
            $('#userimg').css('display', 'none');
        } else { //登录状态  显示头像
            $('#login').css('display', 'none');
            $('#userimg').css('display', 'inline-block');
        }

        // 退出登录的方法
        $('.out').on('click', function() {
            localStorage.removeItem('mid');
            localStorage.removeItem('token');
            location.reload();
            location.href = 'pages/loginAndRegister/login.html';
        });

        //跳转到个人中心
        $('.person').on('click', function() {
            location.href = 'pages/userSeting.html';
        });


        //跳转到课程中心
        $('#coursesCenter').on('click', function() {
            location.href = 'pages/course.html';
        });

        //跳转到我的课程中心
        $('#myLesson').on('click', function() {
            location.href = 'pages/userSeting.html';
        });

        //跳转到搜索页
        $('#searchByKeyword').on('click', function() {
                // alert('ok')
                let keyword = $('#keyWord').val()
                if (keyword == '') {
                    alert('请输入关键字进行搜索')
                    return
                }
                location.href = 'pages/search_list.html?keyword=' + keyword
            })
            //封装一个获取广告图的方法: 深刻认识ajax是异步的，当一些特效中的元素是调用ajax后才有元素，那么一定是调用完ajax才执行相应特效的js函数。
        async function getBannersList() {
            //1. 调用ajax
            let {
                err,
                result
            } = await myAjax({
                    url: '/api/banners'
                })
                // console.log( result,'轮播图' )

            //2. 拼接
            let str1 = str2 = ''
            result.result.forEach(item => {
                    str1 += `<li><img src="${item.image_src}" alt=""></li>`
                    str2 += `<li>${item.title}</li>`
                })
                // let str1 = `
                //     <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                //     <li><img src="./img/index/tbanner1.png" alt=""></li>
                //     <li><img src="./img/index/tbanner3.png" alt=""></li>
                // `

            // let str2  = `
            //     <li class="high">24小时不断电大课堂</li>
            //     <li>内容不够2</li>
            //     <li>内容不够3</li>
            // `
            $('#bannerimgs').html(str1)
            $('#bannerdots').html(str2)

            lunBoTu() //当请求ajax 拿到结果并追加到页面上以后 要调用此方法
        }
        getBannersList()

        // //渲染banners轮播图
        // async function getBanners() {
        //     let {
        //         err,
        //         result
        //     } = await myAjax({
        //         url: '/api/banners',
        //     });
        //     // console.log(result);
        //     let str = ``;
        //     result.result.forEach(item => {
        //         str += `
        //                 <li class="active"><img src="${item.image_src}" alt=""></li>
        //             `;
        //     });
        //     $('.banner .img').html(str);

        //     str = '';
        //     result.result.forEach(function(item) {
        //         str += `
        //             <li class="high">${item.title}</li>
        //             `;
        //     });

        //     $('.banner .list').html(str);
        // }
        // getBanners();
        //渲染同步课程
        async function getCoursesListTongBu() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/courseinfo',
                method: 'get',
            });
            // console.log(result);
            let str = ``;
            result.result.forEach(course => {
                str += `
                <li>
                    <a href='pages/videoDetail.html?id=${course.cid}'>
                    <div class="top">
                        <span class="rj">${course.type_name}</span>
                        <img src="${course.image_src}" alt="" class="m">
                        <p>学科：${course.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${course.title}</span>
                            <span class="time">地区：${course.area_name}</span>
                        </div>
                        <div class="right">${course.price ? course.price + '元' : '免费'}</div>
                    </div>
                    </a>
                </li>
                `
            });
            $('#tongBuContainer').html(str);

        }
        getCoursesListTongBu();

        //渲染精品课程
        async function getJpCourseList() {
            let {
                err,
                result
            } = await myAjax({
                    url: '/api/courseinfo',
                    data: {
                        type: 2
                    }
                })
                //    console.log( result,'精品课' )
                //
            let str = ''
                // console.log( result.result[0] )
                // console.log( result.msg )
                //2. 拼接字符串
            result.result.forEach((course) => {
                //let course = result.result[0]
                str += `
                <li>
                    <a href='pages/videoDetail.html?id=${course.cid}'>
                    <div class="top">
                        <span class="rj">${course.type_name}</span>
                        <img src="${course.image_src}" alt="" class="m">
                        <p>学科：${course.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${course.title}</span>
                            <span class="time">地区：${course.area_name}</span>
                        </div>
                        <div class="right">${course.price ? course.price + '元' : '免费'}</div>
                    </div>
                    </a>
                </li>
                `
            })

            //3. 追加到页面中
            $('#jPContainer').html(str)
        }
        getJpCourseList();
    </script>

    <!-- <script>
        //banner轮播图
        $.ajax({
            url: 'http://localhost:3000/api/banners',
            data: {},
            method: 'get',
            success(res) {
                // console.log(res.result);
                // $('.high').html(res.result[0].title);
                let str = '';

                res.result.forEach(function(item) {
                    console.log(item);
                    str += `
                        <li class="active"><img src="${item.image_src}" alt=""></li>
                    `;
                    $('.banner .img').html(str);
                });

                str = '';
                res.result.forEach(function(item) {
                    str += `
                    <li class="high">${item.title}</li>
                    `;
                });

                $('.banner .list').html(str);
            }
        });

        //同步课程
        $.ajax({
            url: 'http://localhost:3000/api/courseinfo',
            data: {},
            method: 'get',
            success(res) {
                // console.log(res);
                let str = ''
                res.result.forEach((course) => {
                    str += `
                <li>
                    <div class="top">
                        <span class="rj">${course.type_name}</span>
                        <img src="${course.image_src}" alt="" class="m">
                        <p>学科：${course.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${course.title}</span>
                            <span class="time">地区：${course.area_name}</span>
                        </div>
                        <div class="right">${course.price+'元'}</div>
                    </div>
                </li>
                `
                });
                $('#tongBuContainer').html(str)
            }
        });

        //精品课程
        $.ajax({
            url: 'http://localhost:3000/api/courseinfo?type=2',
            data: {},
            method: 'get',
            success(res) {
                // console.log(res);
                let str = '';
                res.result.forEach((course) => {
                    str += `
                    <li>
                            <div class="top">
                                <span class="rj">${course.type_name}</span>
                                <img src="${course.image_src}" alt="" class="m">
                                <p>学科：${course.subject_name}</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>${course.title}</span>
                                    <span class="time">地区：${course.area_name}</span>
                                </div>
                                <div class="right">${course.price+'元'}</div>
                            </div>
                        </li>
                    `;
                });

                $('#jingPinContainer').html(str);

            }
        });
    </script> -->

    <script src="js/ujiuye.js"></script>
    <script src="js/index.js"></script>
</body>

</html>